我們花了兩天的時間完成了一個有模有樣的長條圖，但感覺少了點什麼？參觀一下其他畫圖表的library，你會發現大家都喜歡為圖表加上一點入場動畫，而長條圖最適合的動畫就是從底下長出來，所以今天就來講解一下要如何讓你的svg動起來～

對css熟悉的人一定知道css中的transition，我們常用來做一些簡單的網頁動畫。d3中同樣也有transition的函數，這篇就會先介紹d3 transition的用法，再來實際加在我們的長條圖中。

D3的transition

transition()的使用方式非常簡單，只要加在你要套用效果的前面就可以了，transition預設的時間是250毫秒，也就是transition().duration(250)，想要改變時間的話就把時間放在duration()當中，我們直接來嘗試看看：

<svg width="600" height="400" style="border: 1px solid black">
  <rect width="50" height="50" fill="blue" id="rect-1" x="0"></rect>
  <rect width="50" height="50" fill="red" id="rect-2" x="100"></rect>
</svg>
<script src="http://d3js.org/d3.v5.min.js"></script>
<script>
  d3.select('#rect-1')
    .transition()
    .attr('y', 100)
    .duration(250);

  d3.select('#rect-2')
    .transition()
    .attr('y', 100)
    .duration(750);
</script>

除此之外還能加上delay()來讓動畫的開始時間延後：

<script>
  d3.select('#rect-1')
    .transition()
    .attr('y', 100)
    .duration(250);

  d3.select('#rect-2')
    .transition()
    .attr('y', 100)
    .duration(750);
</script>

動畫當中還有一個很重要的部分就是時間曲線(ease())，剛剛我們做的都是等速運動，如果沒有特別設定就是ease(d3.easeLinear)，另外還有其他的類型如d3.easeBounce（彈跳）：

d3
    .select('#rect-2')
    .transition()
    .attr('y', 100)
    .duration(750)
    .ease(d3.easeBounce);

可以用的類型：https://github.com/d3/d3-ease

為長條圖加上進場動畫

知道怎麼使用transition以後就能實際應用在我們的長條圖上：

g
    .selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', d => x(d.name))
    .attr('y', d => chartHeight) //動畫開始前的y是圖表底部，柱子才會從底下開始長
    .attr('width', x.bandwidth)
    .attr('fill', '#00BAB6')
    .attr('rx', 3)
    .attr('height', d => 0) //動畫開始前高是0
        .transition()
        .duration(750)
        .delay((d, i) => i * 30)
        .ease(d3.easeCubic) //減速
    .attr('height', d => chartHeight - y(d.value))
    .attr('y', d => y(d.value));

是不是看起來活潑了一點～明天將會實作滑鼠hover上圖的Tooltip。

今天的commit: https://github.com/yuanchen1103/2020ironman-weather/commit/cc6aecba9c6773878dff6ae3c05ecd95452c59fa